<template>
  <div class="header">
    <div class="menuFold">
      <i class="header__icon el-icon-s-unfold" @click="$store.commit('foldChange',  !$store.state.fold)" v-if="$store.state.fold"></i>
      <i class="header__icon el-icon-s-fold" @click="$store.commit('foldChange',  !$store.state.fold)" v-else></i>
    </div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: item.path }" v-for="item in $store.state.breadcrumb" :key="item.path">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.header{
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.menuFold{
  padding: 0 15px 0 0;
}
.header__icon{
  cursor: pointer;
  font-size: 26px;
}
</style>